<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script src="../js/vue.js"></script>
    <title>Document</title>
</head>

<body>
    <div id="box">
        <div class="banner">
            <div class="bannerImg">
                <transition-group name="fade" tag="div">
                    <span v-for="(v,i) in banners" :key="i" v-if="(i+1)==index?true:false">
                        <img width="700" :src="v">
                    </span>
                </transition-group>
            </div>
            <ul class="bannerBtn">
                <li v-for="num in 3">
                    <a href="javascript:;" :style="{backgroud:num==index?'#ff9900':'#CCCCCC'}" @mouseover='change(num)'
                        class='aBtn'>{{num}}</a>
                </li>
            </ul>
        </div>
    </div>
</body>

<script type="text/javascript">
    var vm = new Vue({
        el: '#box',
        data: {
            banners: ['banner.jpg', 'banner2.png', 'banner.jpg'],
            index: 1,
            flag: true,
            timer: ''
        },
        methods: {
            next: function () {
                this.index = this.index + 1 == 4 ? 1 : this.index + 1;
            },
            change: function (num) {
                if (this.flag) {
                    this.flag = false;
                    setTimeout(() => {
                        this.flag = true
                    }, 1000);
                    this.index = num;
                    clearTimeout(this.timer);
                    this.timer = setInterval(this.next, 3000)
                }
            }
        },
        mounted: function () {
            this.timer = setInterval(this.next, 3000)
        }
    })
</script>

<style>
    .banner {
        position: relative;
    }

    .bannerImg {
        position: relative;
        height: 360px;
    }

    .bannerImg span {
        position: absolute;
        top: 0;
        left: 0
    }

    .bannerBtn {
        width: 200px;
        position: absolute;
        left: 30%;
        bottom: -20px;
        text-align: center;
    }

    .bannerBtn li {
        list-style: none;
        border-radius: 50%;
        float: left;
    }

    .bannerBtn li a {
        display: block;
        width: 20px;
        height: 20px;
        border-radius: 50%;
        margin: 5px;
        color: #FFFFFF;
        font-weight: bolder;
        text-decoration: none;
    }

    .bannerBtn li a.aBtn {
        transition: all .6s ease;
    }

    .fade-enter,
    .fade-leave-to {
        opacity: 0;
    }
</style>

</html>